<script>
import moment from "moment/moment";
export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    url: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: ''
    }
  },
  name: "commonPopup",
  data() {
    return {
      form: {
        userId: null,
        userIds: [],
        start: null,
        end: null,
        type: this.type
      },
      attendanceDate: [moment().format("YYYY-MM-DD"), moment().format("YYYY-MM-DD")],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      show: false
    }
  },
  methods: {
    dateChange() {
      this.form.start = this.attendanceDate[0]
      this.form.end = this.attendanceDate[1]
    },
    checkData() {
      this.form.start = moment(this.attendanceDate[0]).format("YYYY-MM-DD")
      this.form.end = moment(this.attendanceDate[1]).format("YYYY-MM-DD")
      this.$tools.openLoading()
      axios.post(this.url, this.form).then(res => {
        if (res.data.success) {
          this.$emit("loadList");
          this.$tools.closeLoading();
          this.show = false;
          this.$tools.showMessage(res.data.message?res.data.message:'操作成功', "success")
        } else {
          this.$tools.showMessage(res.data.message?res.data.message:'操作失败', "error")
        }
      }).catch(error => {
        this.$tools.showMessage("操作异常！", "error");
        console.log(error);
        this.$tools.closeLoading();
      })
    },
    open() {
      this.show = true;
    },
    close() {
      this.show = false;
    },
    reset() {
      this.form = {
        userId: null,
        userIds: [],
        start: null,
        end: null,
        type: null
      }
    }
  }
}
</script>

<template>
  <div>
    <el-dialog :title="title" :visible.sync="show" center width="35%">
      <el-row>
        <el-form :model="form" label-width="3rem">
          <el-form-item label="姓名:">
            <el-select v-model="form.userIds" placeholder="请选择员工姓名..."  size="small"
                       class="w100" multiple
                       filterable clearable>
              <el-option :label="item.userName+'（'+item.jobNo+'）'" :value="item.userId" v-for="item in $store.state.userList">
                <span style="float: left">{{ item.userName }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.jobNo }}</span>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="日期:">
            <el-date-picker v-model="attendanceDate" size="small"
                            type="daterange"
                            style="width: 100%"
                            align="left"
                            unlink-panels
                            @change="dateChange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :picker-options="pickerOptions"
                            :clearable="false"
                            value-format="yyyy-MM-dd"
            >
            </el-date-picker>
          </el-form-item>
        </el-form>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="show = false">取 消</el-button>
        <el-button size="small" type="primary" @click="checkData">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped>

</style>
